<template>
  <div class="header-container">
    <ul>
      <li class="ul-class">
        <router-link to="/home"> home </router-link>
      </li>
      <li class="ul-class">
        <router-link to="/about"> about </router-link>
      </li>
            <li class="ul-class">
        <router-link to="/list"> list </router-link>
      </li>
      <!-- <li class="ul-class"> item3 </li>
      <li class="ul-class"> item4 </li>
      <li class="ul-class"> item5 </li>
      <li class="ul-class"> item6 </li> -->
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
ul {
  height: 100%;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ul-class {
  height: 100%;
  padding: 0 0.5rem;
  font-size: 1.5rem;
  font-weight: bold;
}
.ul-class:nth-of-type(odd) {
  color: #f00;
}
.ul-class:hover {
  background-color: bisque;
  color: #4ba1f1;
}
</style>
